<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>

        body {
            height: 100%;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
        }

        #app, html {
            height: 100%;
        }
        html, body, #app {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .login {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            height: 100%;
            background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg);
            background-size: cover;
        }

        .login-form {
            border-radius: 6px;
            background: #fff;
            width: 400px;
            padding: 25px 25px 5px 25px;
        }

        .title {
            margin: 0 auto 30px auto;
            text-align: center;
            color: #707070;
        }

        .el-form-item {
            margin-bottom: 22px;
        }

        .el-form-item__content {
            line-height: 40px;
            position: relative;
            font-size: 14px;
        }

        .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 100%;
        }

        .el-input--medium {
            font-size: 14px;
        }

        .login-form .el-input, .login-form .el-input input {
            height: 38px;
        }

        .el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label {
            line-height: 36px;
        }

        .el-input__inner {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
        }

        .el-input--prefix .el-input__inner {
            padding-left: 30px;
        }

        .el-input--medium .el-input__inner {
            height: 36px;
            line-height: 36px;
        }

        .el-input__icon, .el-input__prefix {
            height: 100%;
            text-align: center;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

        .el-input__prefix {
            position: absolute;
            left: 5px;
            top: 0;
            color: #c0c4cc;
        }
        img {
            border-style: none;
        }

        .login-code {
            width: 33%;
            height: 38px;
            float: right;
        }

        login-code img {
            cursor: pointer;
            vertical-align: middle;
        }
        .login-code-img {
            height: 38px;
        }


        .el-button {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            border-color: #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            -webkit-transition: .1s;
            transition: .1s;
            font-weight: 400;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
        }

        .el-button--primary {
            color: #fff;
            background-color: #1890ff;
            border-color: #1890ff;
        }

        .el-button--medium {
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 4px;
        }
        .el-login-footer {
            height: 40px;
            line-height: 40px;
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #fff;
            font-family: Arial;
            font-size: 12px;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login">
        <form class="el-form login-form" id="signupForm" autocomplete="off"><h3 class="title">后台管理系统</h3>
            <div class="el-form-item is-success is-required el-form-item--medium">
                <div class="el-form-item__content">
                    <div class="el-input el-input--medium el-input--prefix">
                        <input type="text" autocomplete="off" placeholder="账号" name="username" value="admin" class="el-input__inner uname">
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required el-form-item--medium">
                <div class="el-form-item__content">
                    <div class="el-input el-input--medium el-input--prefix">
                        <input type="password" autocomplete="off" placeholder="密码" name="password" value="admin123" class="el-input__inner pword">
                    </div>
                </div>
            </div>
            <div class="el-form-item is-required el-form-item--medium">
                <div class="el-form-item__content">
                    <div class="el-input el-input--medium el-input--prefix" style="width: 63%;">
                        <input type="text" autocomplete="off"  name="validateCode" placeholder="验证码" class="el-input__inner">
                    </div>
                    <div class="login-code">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img src="" class="imgcode login-code-img">
                        </a>
                    </div>
                </div>
            </div>
            <div class="el-form-item el-form-item--medium" style="width: 100%;">
                <div class="el-form-item__content">
                    <button id="btnSubmit" data-loading="正在验证登录，请稍后..." class="btn btn-success btn-block el-button el-button--primary el-button--medium" style="width: 100%;">
                        登 录
                    </button>
                </div>
            </div>
        </form>
        <div class="el-login-footer">
            <span>Copyright © 2020  All Rights Reserved.</span>
        </div>
    </div>

</div>

<!-- 全局js -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<!-- 验证插件 -->
<script src="static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="static/ajax/libs/layer/layer.min.js"></script>
<script src="static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="static/ruoyi/js/ry-ui.js"></script>
<script src="static/ruoyi/js/common.js"></script>
<script>
    var ctx="http://localhost:8080/netease/admin/"
    storage.set('ctx', ctx)
</script>
<script src="static/ruoyi/login.js"></script>
</body>
</html>